import {
	Decoration10,
	Decoration8,
	Decoration6,
} from '@jiaminghi/data-view-react'
import { useEffect, useRef, useState } from 'react'

const stateInfo = {
	title: '大数据可视化平台',
	weekday: [
		'星期天',
		'星期一',
		'星期二',
		'星期三',
		'星期四',
		'星期五',
		'星期六',
	],
}

const NewDecoration8 = ({ reverse = false }: { reverse?: boolean }) => (
	<Decoration8
		reverse={reverse}
		className="w-[200px]! h-[50px]!"
		color={['#568aea', '#000000']}
	/>
)

export const Header = () => {
	const [timeStr, setTimeStr] = useState('')
	// 用户缓存计时器
	const timer = useRef<NodeJS.Timeout | null>(null)

	const setTimerFn = () => {
		timer.current = setInterval(() => {
			const date = new Date()
			const year = date.getFullYear()
			const month = date.getMonth() + 1
			const day = date.getDate()
			const weekday = date.getDay()
			const hour = date.getHours()
			const minute = date.getMinutes()
			const second = date.getSeconds()
			setTimeStr(
				`${year}-${month}-${day} | ${hour}:${minute}:${second} ${stateInfo.weekday[weekday]}`,
			)
		}, 1000)
	}

	useEffect(() => {
		setTimerFn()
		return () => {
			if (timer.current) {
				clearInterval(timer.current)
			}
		}
	}, [timeStr])

	return (
		<div className="w-full flex justify-center relative">
			<Decoration10 className="h-[5px]!" />
			<div className="w-[100%-66%] flex justify-center">
				<NewDecoration8 />
				<div className="w-[500px] relative">
					<span className="text-white text-2xl absolute bottom-0 left-[50%] translate-x-[-50%]">
						{stateInfo.title}
					</span>
					<Decoration6
						className="w-[250px]! h-2! absolute bottom-[-30px] left-[50%] translate-x-[-50%]"
						reverse={true}
						color={['#50e3c2', '#67a1e5']}
					/>
				</div>
				<NewDecoration8 reverse />
			</div>
			<Decoration10 className="h-[5px]! rotate-y-180" />
			<div className="absolute right-8 bottom-[-5px]">
				<h3 className="text-[18px] text-[#bcdcff]">{timeStr}</h3>
			</div>
		</div>
	)
}
